<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Error 404 - Page Not Found</title>
        <link
            rel="icon"
            href="https://raw.githubusercontent.com/YuheshPandian/ICONIC/refs/heads/main/icons/light/iconic.svg"
            type="image/svg+xml"
        />

        <!-- Google Fonts -->
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto:wght@400;500&display=swap"
            rel="stylesheet"
        />

        <style>
            body {
                margin: 0;
                padding: 0;
                background-color: #092635;
                font-family: "Roboto", sans-serif;
                color: #5c8374;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
                height: 100vh;
                flex-direction: column;
                padding: 1rem;
                background-image: radial-gradient(#1b4242 1px, transparent 0);
                background-size: 40px 40px;
                background-position: -19px -19px;
            }

            .container {
                max-width: 600px;
            }

            h1 {
                font-family: "Poppins", sans-serif;
                font-size: 6rem;
                color: #5c8374;
                margin-bottom: 0.3rem;
                line-height: 0.75;
            }

            h2 {
                font-size: 1.4rem;
                font-family: Inter, sans-serif;
                font-weight: 300;
                margin-bottom: 1rem;
                color: #9ec8b9;
            }

            p {
                font-size: 1rem;
                color: #5c8374;
                line-height: 1.6;
            }

            .btn {
                margin-top: 2rem;
                display: inline-block;
                background-color: #1b4242;
                color: #ddd;
                border: 2px solid #9ec8b9;
                padding: 0.75rem 1.5rem;
                border-radius: 8px;
                text-decoration: none;
                font-weight: bold;
                font-family: "Poppins", sans-serif;
                transition: 0.3s ease;
            }

            .btn:hover {
                background-color: #9ec8b9;
                color: #333;
            }

            .code-block {
                margin-top: 1.5rem;
                background-color: #1b4242;
                border-left: 4px solid #9ec8b9;
                padding: 1rem;
                font-family: monospace;
                font-size: 0.95rem;
                color: #ddd;
                border-radius: 8px;
                text-align: left;
            }

            @media (max-width: 600px) {
                h1 {
                    font-size: 2.5rem;
                }
                h2 {
                    font-size: 1.2rem;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Error 404</h1>
            <h2>Sorry, we couldn't find that page.</h2>
            <p>
                The page you're looking for may have been moved, deleted, or
                never existed. That’s on us… probably.
            </p>

            <div class="code-block">
                <strong>Suggestions:</strong><br />
                • Double-check the URL for typos<br />
                • Try searching from the homepage<br />
                • Let us know if something's broken
            </div>

            <a href="/" class="btn">Back to Home</a>
        </div>
    </body>
</html>
